L = require('leaflet@1.2.0')

// Include Leaflet CSS and custom legend CSS
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`

html`
<style>
.info.legend {
  line-height: 18px;
  color: #555;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 10px;
}
.info.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}
</style>
`

color_scale = d3.scaleSequential(t => d3.interpolateMagma(1 - t))
  .domain([1, 7]);


// Create the map with filtered data
map = {
  // Calculate dimensions based on card width
  let width = 850; // Prilagodite širinu kartice prema potrebi
  let height = width / 1.6; // Omjer širine i visine za kartu

  // Create the container for the map
  let container = DOM.element('div', {
    style: `width: ${width}px; height: ${height}px`
  });
  yield container;

   let map = L.map(container).setView([44.4, 16.4], 7);
  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  filtered_quakes.forEach(d => {
    L.circleMarker([d.lat, d.lon], {
      radius: d3.scaleLinear().domain([1, 7]).range([1, 7])(d.mag),
      fillColor: color_scale(d.mag),
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.5
    }).addTo(map)
      .bindPopup(`
      <div style="font-family: 'Montserrat', serif;">
        Date: ${d.date_only}<br/>
        Time: ${d.time_only}<br/>
        Magnitude: ${d.mag.toFixed(2)}<br/>
        Depth: ${d.depth} km<br/>
        Location: ${d.place}
      `);
  });

  // Add legend to the map
  var legend = L.control({position: 'topleft'});
  legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend'),
      grades = [1, 2, 3, 4, 5,6],
      labels = [];
      
      div.innerHTML += '<strong style="font-family: Baskerville;">Magnitude</strong><br>';

    // Loop through intervals to generate labels with a colored square for each interval
   for (var i = 0; i < grades.length; i++) {
      div.innerHTML +=
        '<i style="background:' + color_scale(grades[i]) + '"></i> ' +
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
    }

    return div;
  };
  legend.addTo(map);

  return map;
}

viewof table = Inputs.table(filtered_quakes, {
  columns: [
    "date_only",
    "time_only",
    "mag",
    "depth",
    "place"
  ],
  header: {
    date_only: "Date",
    time_only: "Time",
    mag: "Magnitude",
    depth: "Depth",
    place: "Location"
  },
  width: {
   date_only: 150,
    time_only: 100,
    mag: 80,
    depth: 80,
    place: 150
  },
  format: {
    depth: x => Number.isInteger(x) ? x.toString() : x.toFixed(2)
  },
  rows: Infinity, 
  pagination: true
})


html`<style>
table {
  table-layout: auto;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  color: #5A5555;
  border-bottom: 1px solid #ddd;
  font-family: Baskerville;
  font-weight: bold;
}

td {
  border-bottom: 1px solid #ddd;
  word-wrap: break-word;
  font-family: Montserrat;
  color: #5A5555;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #D5C3C3;
}
</style>
`

html`<style>
table {
  table-layout: auto;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  color: #5A5555;
  border-bottom: 1px solid #ddd;
  font-family: Baskerville;
  font-weight: bold;
}

td {
  border-bottom: 1px solid #ddd;
  word-wrap: break-word;
  font-family: Montserrat;
  color: #5A5555;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #D5C3C3;
}
</style>
`

html`
<style>
    .dashboard-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #f8f9fa;
        color: #5A5555;
        text-align: left;
        padding: 5px;
        font-size: 0.7em;
        border-top: 1px solid #eee;
        line-height: 1.2;
        font-family: Baskerville;
    }
   .dashboard-footer a {
    color: #AB8787;
    text-decoration: none;
}
</style>
<footer class="dashboard-footer">
    Data source: <a href="https://earthquake.usgs.gov/" target="_blank">USGS</a>. 
Note: The data may not reflect real-time conditions due to potential missing earthquakes. 
Smaller earthquakes, especially outside the U.S., may not be rapidly reported or located. For more detailed information, please refer to the USGS website. The earthquake data is updated daily at 9:00 AM UTC. 
<a href="https://github.com/andabaka/earthquakes" target="_blank">
    <i class="fab fa-github"></i> Source Code
</a>
</footer> 
`